<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>界面</title>
<!-- 引入css文件，不限顺序 -->
    <link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
  
  	<!-- 引入js文件，有顺序限制 -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<!-- 调用方法的语法：$('selector').plugin('method', parameter); 
	解释： 
	selector 是jQery对象选择器。
	plugin 是插件的名称。
	method 是相应插件现有的方法。
	parameter 是参数对象，可以是一个对象、字符串等 -->


<!-- 布局 -->
<!-- layout -->
<div id="layoutID" class="easyui-layout"  
     style="width:600px;height:400px" data-options="fit:true">  
    <!-- 区域面板--北边 --> 
    <div data-options="region:'north'" style="height:100px;">
        <center><font style="font-size: 66px">jQuery-EasyUI组件</font></center>
    </div>   
    
    <!-- 区域面板--南边 -->  
    <div data-options="region:'south'" style="height:100px;">
        <center><font style="font-size:33px">来伊份公司版权所有</font></center>
    </div>   
    
    
    <!-- 区域面板--东边 -->  
    <div data-options="region:'east'" style="width:100px;"></div> 
    
      
    <!-- 区域面板--西边 -->    
    <div data-options="region:'west'" style="width:200px;">  
        <!-- panel面板 -->
		<div id="panelID" class="easyui-panel" title="系统菜单" data-options=fit:true> 
		    <!-- 嵌套accordion分类 -->
		    <div id="accordingID"  class="easyui-accordion" data-options=fit:true,selected:-1>    
		        <div title="部门管理" data-options="iconCls:'icon-save'">  
		                <!-- 在嵌套linkbutton按钮--> 
						<a 
							id="btn_add" 
							href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-add'">增加部门</a><p> 
						<a 
							id="btn_find" 
							href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-search'">查询部门</a><p> 
						<a 
							id="btn_update" 
							href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-edit'">修改部门</a><p> 
						<a 
							id="btn_delete" 
							href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-remove'">删除部门</a><p>  
		        </div>   
		        <div title="人事管理" data-options="iconCls:'icon-reload'">   
		            content2    
		        </div>   
		        <div title="客户管理" data-options="iconCls:'icon-remove'">   
		            content3    
		        </div>   
		          <div title="权限管理" data-options="iconCls:'icon-edit'">   
		            content3    
		        </div>  
		          <div title="报表管理" data-options="iconCls:'icon-print'">   
		            content3    
		        </div>  
		          <div title="帮助" data-options="iconCls:'icon-help'">   
		            content3    
		        </div>  
		    </div>  		   
		</div>	      	
    </div>   
    
      
    <!-- 区域面板--中间 -->    
    <div data-options="region:'center',fit:true"  
         style="padding:5px;background:#eee;">
                <!-- Tabs选项卡 -->
				<div id="tabsID" 
				class="easyui-tabs">      
				</div>           
     </div>   
     
     <script type="text/javascript">
     
		   //定位部门管理下面4个按钮
		   $("a").click(function(){
			 //获取你所单击的按钮的标题
			 var title=$(this).text();
			//去空格
			title=$.trim(title);			
			//如果title变量是"增加部门"
			if("增加部门" == title){
				//查看该选项卡是否已经打开			
				var flag = $("#tabsID").tabs("exists",title);
				 //如果未打开
				if(!flag){
					 $("#tabsID").tabs("add",{
							"title" : title,
					  "collapsible" : true,
							 "href" : "${pageContext.request.contextPath}/adddepartment.jsp",
						 "closable" : true
						});
				 }
			}else if("查询部门" == title){
				var flag = $("#tabsID").tabs("exists",title);
				if(!flag){
					//打开选项卡
					$("#tabsID").tabs("add",{
						"title" : title,
						"href" : "${pageContext.request.contextPath}/easyui/06Pagination.html",
						"closable" : true,
						"iconCls" : "icon-search"
					});
				}
			}
		   });     
     </script>
     
  
</div>  
</body>
</html>